<template>
  <div>
    <p>{{title}}</p>
    <p >{{msg}}</p>
    <div class="hello" v-show="isShow" v-once>
      {{ message }}
    </div>
    <div class="hello" v-if="isShow" >
      {{ message }}
    </div>
    <div @click="reverseMessage">reverse message</div>
    <ul>
      <li v-for="item in list" :key="item.name" >{{item.name}}</li>
    </ul>
    <p>{{inputValue}}</p>
    <input type="text" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
      isShow: true,
      list: [
        {name: 'zsx'},
        {name: 'lly'},
        {name: 'gjy'}
      ],
     inputValue: 'zsx gou shi',
     tilteSon: this.title
    }; 
  },
  props:{
    msg: String,
    title: Number
  },
  components:{},
  methods:{
    reverseMessage(){
      this.isShow = true,
      this.message = this.message.split('').reverse().join('')
    }
  },
};
</script>
<style scoped>
ul,li{
  list-style: none;
}
</style>
